<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>shops</title>
		<link href="css/mi.css" type="text/css" rel="stylesheet">
		<link href="css/personal.css" type="text/css" rel="stylesheet">
		<link href="css/shops.css" type="text/css" rel="stylesheet">
		<link href="layui/css/layui.css" type="text/css" rel="stylesheet">

		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/mi.js"></script>
		<script src="js/personal.js"></script>

	</head>

	<body onclick="hidehotbox()">

		<div style="margin:auto;height:0px;width:1226px">
			<div style="position:relative;top:40px;left:916px">
				<div class="shop-box" id="shopbox">购物车中还没有商品，赶紧选购吧！</div>
			</div>
		</div>

		<div style="margin:0 auto auto auto;height:0px;width:1226px">
			<div style="position:relative;top:40px;left:864px">
				<div class="personbox">
					<div class="personconttent">个人中心</div>
					<div class="personconttent">我的喜欢</div>
					<div class="personconttent">小米账户</div>
					<div class="personconttent">退出登录</div>
				</div>
			</div>
		</div>

		<div class="main" onmouseover="hidePersonBox()">
			<div class="main" onmouseover="colsebox()">
				<div class="top">
					<div class="top-content">
						<a href="#">小米商城</a>
						<a href="#">MIUI</a>
						<a href="#">米聊</a>
						<a href="#">游戏</a>
						<a href="#">多看阅读</a>
						<a href="#">云服务</a>
						<a href="#">金融</a>
						<a href="#">小米移动版</a>
						<a href="#">问题反馈</a>
						<a href="#">SelectRegion</a>
						<div class="top-shop" id="car" onmouseover="shopbox()">购物车(0)</div>
						<div style="float:right">
							<a href="regist.html">消息通知</a>
							<a href="#">我的订单</a>
						</div>
						<div class="personal" onmouseover="showPersonBox()">1212323&nbsp;∨</div>
					</div>
				</div>

				<div class="title">
					<div class="title-logo">
						<a href="#"><img src="img/mi.png" /></a>
					</div>
					<div class="title-gif">
						<a href="#"><img src="img/mkljl.gif" width="163px" height="57px" /></a>
					</div>
					<div class="title-content">
						<a href="#">小米手机</a>
						<a href="#">红米</a>
						<a href="#">平板-笔记本</a>
						<a href="#">电视</a>
						<a href="#">盒子-影音</a>
						<a href="#">路由器</a>
						<a href="#">智能硬件</a>
						<a href="#">服务</a>
						<a href="#">社区</a>
					</div>
					<div class="title-search">
						<div class="title-input" name="sborder">
							<input type="text" onclick="showhotbox()" />
							<div style="position:relative;right:-90px;top:-14px">
								<div class="title-tag" id="tag">
									<a href="#">小米MIX</a>
									<a href="#">人工智能电视</a>
								</div>
							</div>
						</div>
						<div class="title-btn" name="sborder">
							搜索
						</div>
						<div style="position:relative;top:58px;right:0px">
							<div id="hotbox" class="title-hotbox" name="sborder">
								<ul>
									<li>小米5 plus
										<div class="title-count">约有5件</div>
									</li>
									<li>小米MAX
										<div class="title-count">约有10件</div>
									</li>
									<li>小米MIX
										<div class="title-count">约有20件</div>
									</li>
									<li>小米note
										<div class="title-count">约有5件</div>
									</li>
									<li>红米none5
										<div class="title-count">约有15件</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>

				<div class="bg">
					<div class="info">
						<div class="info-top">
							<a href="#">首页</a> > 电子产品
						</div>
						<div class="shops-menu">
							<table>
								<tbody>
								<tr>
									<td style="border: 1px solid rgb(224,224,224);width: 60px;background-color: rgb(245,245,245);text-align: left;padding-left:20px">手机</td>
									<td><a href="#">全部</a></td>
									<td><a href="#">三星</a></td>
									<td><a href="#">苹果</a></td>
									<td><a href="#">三星</a></td>
									<td><a href="#">苹果</a></td>
									<td><a href="#">三星</a></td>
									<td><a href="#">苹果</a></td>
									<td><a href="#">三星</a></td>
									<td><a href="#">苹果</a></td>
								</tr>
								<tr>
									<td style="border: 1px solid rgb(224,224,224);width: 60px;background-color: rgb(245,245,245);text-align: left;padding-left:20px">手机</td>
									<td><a href="#">全部</a></td>
									<td><a href="#">三星</a></td>
									<td><a href="#">苹果</a></td>
									<td><a href="#"></a></td>
									<td><a href="#"></a></td>
									<td><a href="#"></a></td>
									<td><a href="#"></a></td>
									<td><a href="#"></a></td>
									<td><a href="#"></a></td>
							
								</tr>
								<tr>
									<td style="border: 1px solid rgb(224,224,224);width: 60px;background-color: rgb(245,245,245);text-align: left;padding-left:20px">手机</td>
									<td><a href="#">全部</a></td>
									<td><a href="#">三星</a></td>
									<td><a href="#">苹果</a></td>
									<td><a href="#"></a></td>
									<td><a href="#"></a></td>
									<td><a href="#"></a></td>
									<td><a href="#"></a></td>
									<td><a href="#"></a></td>
									<td><a href="#"></a></td>
								</tr>
							   </tbody>
							</table>
						</div>
						<div class="shops-order">
                            <input type="radio" name="order" value="默认"><label>默认</label>
                            <input type="radio" name="order" value="价格"><label>价格</label>
                            <input type="radio" name="order" value="销量"><label>销量</label>
                            <input type="radio" name="order" value="发布时间"><label>发布时间</label>
                            <input type="radio" name="order" value="包邮"><label>包邮</label>
						</div>

						<div class="shops-content">
							<div class="shops-content-top">
							    <div class="shops-content-topbox" style="background-image: url(img/hot1.jpg);background-size: 100%;">
								    <div class="shops-content-topname">
								    	<a href="#" style="color:gold">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								    </div>
								    <div class="shops-content-topbuy">立即购买</div>
							    </div>
							    <div class="shops-content-topbox" style="margin-right: 0;background-image: url(img/hot1.jpg);background-size: 100%;">
								    <div class="shops-content-topname">
								    	<a href="#" style="color:gold">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								    </div>
								    <div class="shops-content-topbuy">立即购买</div>
							    </div>	
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box" style="margin-right: 0;">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box" style="margin-right: 0;">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box" style="margin-right: 0;">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box" style="margin-right: 0;">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box" style="margin-right: 0;">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							<div class="shops-content-box" style="margin-right: 0;">
								<div class="shops-image">
									<a href="#"><img src="img/hot1.jpg" width="290px" height="280px"></a>
								</div>
								<div class="likesName">
									<a href="#">小米笔记本Air 12.5英寸 </a> | <span style="color:rgb(250,103,0)">3499元</span>
								</div>
								<div class="shops-time">发布时间：2017-02-20</div>
								<div class="shops-buy">立即购买</div>
							</div>
							
							
							<div class="shops-page">
								<a href="#">首页</a>
								<a href="#">上一页</a>
								<a href="#">1</a>
								<a href="#">2</a>
								<a href="#">3</a>
								<a href="#">4</a>
								<a href="#">5</a>
								<a href="#">下一页</a>
							    <a href="#">尾页</a>
							</div>
							
							<!-- 分页 -->
		<div style="text-align: center;">
			<div id="pageList" class="layui-box layui-laypage layui-laypage-default" style="text-align: center;margin-top: 50px auto;"></div>	
		</div> 	
		<div id="demo2"></div>

						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		
		<script src="layui/layui.js"></script>
		<script>
			 layui.use(['laypage', 'layer'], function(){
                 var laypage = layui.laypage;
                 var layer = layui.layer;

			     laypage({
                    cont: 'demo2',
                    pages: 100,
                    skin: '#FF0000'
                });
             });
		</script>
	</body>

</html>